<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../vue.js"></script>
</head>

<body>
  <div id="app">
    <son ref="son1"></son>
    <son></son>
    <son></son>
    <!-- 通过这个按钮来触发事件 -->
    <button @click="btnClick">按钮</button>
  </div>

  <template id="son">
    <div>
      <h2>我是子组件</h2>
    </div>
  </template>
  <script>
    const son = {
      template: "#son",
      data() {
        return {
          name: "子组件数据"
        }
      },
      methods: {
        showMessage() {
          console.log("子组件方法");
        }
      }
    }

    const app = new Vue({
      el: "#app",
      components: {
        son
      },
      methods: {
        btnClick() {
          // 1. 通过children获取所有的子组件
          // 获取的是所有的子组件组成的一个数组
          // 想要获取某个特定的子组件, 只能使用数组的下标获取(这样很不灵活, 所以使用children获取子组件的方法很少用)
          /* console.log(this.$children);
          this.$children[0].showMessage(); // 通过$children 使用某个下标的子组件的方法
          console.log(this.$children[0].name); // 通过$children 获取某个下标的子组件的数据 */

          // 2. 通过$refs 获取某个特定的子组件
          console.log(this.$refs); // $refs 获得的是一个对象, 里面包含通过标签属性ref注册的子组件 可以通过属性ref的值来获取特定的一个子组件
          this.$refs.son1.showMessage(); //通过refs调用ref值为son1的子组件的方法
          console.log(this.$refs.son1.name); // 通过refs获取ref值为son1的子组件中的数据

        }
      }

    })
  </script>
</body>

</html>